5.4. Focusable and form events
Table 27 shows
support for the onfocus, onblur, onchange, and onsubmit (only for forms) events on
different mobile browsers.
Table 27. Form events compatibility table
Browser/platform | onfocus | onblur | onchange | onsubmit |
---|
Safari | Yes | Yes | Yes | Yes |
Android
browser | Yes | Yes | Yes | Yes |
Symbian/S60 | Yes | Yes | Yes | Yes |
Nokia Series
40 | Yes | No | No | Yes |
webOS | Yes | Yes | Yes | Yes |
BlackBerry | Yes | Yes | Yes | Yes |
NetFront | Yes | Yes | Yes | Yes |
Internet
Explorer | Yes | No | Yes | Yes |
Motorola Internet
Browser | No | No | No | No |
Opera
Mobile | Yes | Yes | Yes | Yes |
Opera
Mini | No | Yes | No | Yes |
5.5. Over events
The over events include mouseover and mouseout and are typically used for creating
a hover effect when the cursor is over an element. Usage
of these events in mobile websites is discouraged for must-have
features, because they will only work on cursor-based browsers. Touch
and focus devices don’t have an “over” state; it should be replaced by
an active state or a focus one for focus-based browsers.
Note:
Safari on iOS also supports the onmousewheel event when the user is
scrolling the element using two fingers at the same time.
5.6. Resizing, scrolling, and orientation change events
When the user activates scrolling over the document, some browsers fire the
onscroll event from the document as
a whole. Others also support the onresize event, which fires when the
window size is changed. Users cannot resize mobile
browser windows in the way they can resize desktop application
windows, but a resize can be generated if the orientation of the device changes from portrait to
landscape or vice versa.
Note:
Using percentage values for widths is a good mobile design
practice. It automatically works on all devices and allows your
application to readapt automatically to any orientation.
Unfortunately, some devices (like the Nokia N70) have some bugs with
percentage values so the block still wraps around content, creating
an awful horizontal scroll.
As of iOS 2.0, Safari also offers the onorientationchange window event and an
orientation property. This property
has a value of 0 in portrait mode,
90 in landscape mode, and −90 in inverse landscape mode. We can use
this to make changes in the DOM or use the body class pattern to change
the whole layout:
if (window.onorientationchange) {
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0: // Portrait
break;
case 90: // Landscape to the left
break;
case −90: // Landscape to the right
break;
}
}
}
Note:
Nokia N97 home screen widgets are just web documents that fire
the onresize event when going
from full screen to home screen mode and vice versa.
If the device isn’t an iPhone and supports onresize, we can detect the change using the
following code:
if (window.onresize) {
if (screen.width>screen.height) {
// Landscape
} else {
// Portrait
}
}
Table 28 lists the
browsers’ compatibility with the onscroll and onresize events.
Table 28. Scroll and resize events compatibility table
Browser/platform | onscroll | onresize |
---|
Safari | Yes | Yes |
Android
browser | Yes | Yes |
Symbian/S60 | Yes | Yes, also when the
toolbar hides |
Nokia Series
40 | No | No |
webOS | Yes | Yes |
BlackBerry | No | In some
devices |
NetFront | No | No |
Internet
Explorer | No | No |
Motorola Internet
Browser | No | No |
Opera
Mobile | No | Yes |
Opera
Mini | No | No |
5.7. Key events
Key events—onkeypress, onkeyup, and onkeydown—allow us to detect keypresses over
the whole page (body) or in one
element (generally, a text input). On compatible mobile devices, this
can be useful for many situations:
To provide keyboard shortcuts
To provide navigation or movement in a game or
application
To enable form submission on Enter or another
keypress
To disallow some characters in a text input
If we are going to prevent a key from being used, we should be
very careful. Remember that devices can have very different keyboards.
Some devices have only virtual keyboards, some numeric, and some
QWERTY, and key code management across platforms can be a little
tricky.
Table 29 shows
the compatibility of key events over the body and in a text input.
Table 29. Key events compatibility table
Browser/platform | Support for
onkeypress, onkeyup, and onkeydown | Support for
onkeypress in a text input |
---|
Safari | No | Yes |
Android
browser | Yes, but it also opens
address bar | Yes |
Symbian/S60 | Yes | Yes |
Nokia Series
40 | Yes | No |
webOS | Yes, but it also opens
address bar | Yes |
BlackBerry | Yes | No |
NetFront | No | No |
Internet
Explorer | Yes | No |
Motorola Internet
Browser | No | No |
Opera
Mobile | No | Yes |
Opera
Mini | No | No |
Note:
If the device has a QWERTY keyboard we can also detect some modifier keys
(if they exist), like Ctrl, Alt, or Shift, using the event
properties.
A simple test for getting key codes can be created using the
following code:
5.7.1. Useful keys for some devices
In Safari on iOS, while the focus is inside a text input with
the keyboard visible onscreen, we can capture every key pressed
using only keyCode. Table 30 shows some important
codes.
Table 30. Useful keyCodes in Safari
Key | keyCode |
---|
Backspace/Del | 127 |
Enter | 10 |
Space | 32 |
There are Android and webOS (Palm) devices with physical
keyboards, and others without them. The possible special key values
for all these devices are shown in Table 31.
Table 31. Android and webOS useful keyCodes
Key | keyCode |
---|
Backspace/Del | 8 |
Enter | 13 |
Space | 32 |
The Nokia N97 has a full QWERTY keyboard, but the letters
don’t provide the correct ASCII values unless the user presses the
Shift key at the same time. For example, the H and I keys provide
the same keyCode (56) but
different charCodes. The default
Unicode values for the charCodes
are the numeric or symbol values of the keys (typically used with
the Sym key). If the user is using the onscreen keyboard (only
available as a pop-up window when a form has focus), every character
typed is delivered (regardless of whether it was entered on the
numeric keyboard, by touch recognition, or by predictive text).
Table 32 shows the
common codes.
Table 32. Symbian 5th edition useful
keyCodes
Key | keyCode | charCode |
---|
Backspace | 8 | 8 |
Enter | 13 | 13 |
Space | 32 | 32 |
Up | 38 | 63497 |
Down | 40 | 63498 |
Left | 37 | 63495 |
Right | 39 | 63496 |
Fire | N/A | 63557 |
Warning:
Even if we can capture keypresses, remember that special
keys (Menu, Call, End, Volume) are generally out of our scope as
web developers. We cannot detect those keys.
Symbian 3rd edition devices
(including the Nokia N95, E61, and so on) are non-touch devices with
numeric keypads. The few keys we can capture on such devices are
shown in Table 33.
Table 33. Symbian 3rd edition useful
keyCodes
Key | keyCode | charCode |
---|
Clear | 8 | 8 |
Send | N/A | 63586 |
Cursor and
Fire | N/A | N/A |
5.8. Preventing default behavior
For almost every event, we can prevent the default
behavior by using the event.preventDefault method or capturing the
event and returning false. This is
commonly done with the onsubmit
event, to cancel the submission when something doesn’t validate, or to
cancel a link. For example:
<a href="news.html" onclick="news();return false">Go to news</a>
The preceding code is a standard link to
news.html, but if JavaScript is supported we can
capture the onclick event, call a
local function (that can get the news by Ajax), and cancel the normal
behavior of the link by returning false. This avoids a page load and reduces
network traffic.
We can also prevent a key from being used by cancelling the
onkeyup event. This feature must be
used very, very carefully, and only on tested devices.
Table 34 shows which
browsers support these three common scenarios.
Table 34. Preventing default event behavior compatibility table
Browser/platform | onsubmit | onclick on
links | onkeyup |
---|
Safari | Yes | Yes | Partial |
Android
browser | Yes | Yes | No |
Symbian/S60 | Yes | Yes | Partial |
Nokia Series
40 | Yes | Yes | No |
webOS | Yes | Yes | Partial |
BlackBerry | Yes | Yes | No |
NetFront | Yes | Yes | Yes |
Internet
Explorer | Yes | Yes | No |
Motorola Internet
Browser | Yes | Yes | No |
Opera
Mobile | Yes | Yes | No |
Opera
Mini | Yes | Yes | No |